<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('父级节点')" prop="parentId">
            <el-select v-model="form.parentId" :placeholder="$t('请选择')" filterable>
              <el-option
                v-for="node in parentNodeOptions"
                :key="node.id"
                :label="$t(node.nodeName)"
                :value="node.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('节点名称')" prop="nodeName">
            <el-input v-model="form.nodeName" :placeholder="$t('节点名称')" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('审批完成后是否发起会议')" prop="meeting">
            <el-radio-group v-model="form.meeting" @change="changeMeeting">
              <el-radio
                v-for="item in yesNoOptions"
                :key="item.dictValue"
                :label="$t(item.dictValue)"
              > {{ $t(item.dictLabel) }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('对应流程')" prop="processKey">
            <el-select v-model="form.processKey" filterable :placeholder="$t('请选择')" clearable>
              <el-option
                v-for="process in procDefKeyOptions"
                :key="process.key"
                :label="$t(process.name)"
                :value="process.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0' && form.meeting !== 'Y'" :span="12">
          <el-form-item :label="$t('表单类型')" prop="formType">
            <el-select v-model="form.formType" :placeholder="$t('请选择')" filterable clearable @change="getFormList(form,true)">
              <el-option
                v-for="dict in formTypeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0' && form.meeting !== 'Y'" :span="12">
          <el-form-item :label="$t('绑定表单')" prop="formId">
            <el-select v-model="form.formId" :placeholder="$t('请选择')" filterable clearable>
              <el-option
                v-for="formOption in formList"
                :key="formOption.id"
                :label="$t(formOption.name)"
                :value="formOption.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('是否需要流程操作按钮')" prop="operation">
            <dict-select v-model="form.operation" dictionary="sys_yes_no" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('会议类型')" prop="meetingType" :rules="[{required: form.meeting === 'Y',message:this.$t('必填信息'),trigger:'blur'}]">
            <el-select v-model="form.meetingType" filterable :placeholder="$t('请选择')" clearable>
              <el-option
                v-for="dict in mtTypeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('可以查看表单的角色')" prop="viewRole">
            <el-select v-model="form.viewRole" multiple :placeholder="$t('请选择')" filterable clearable>
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="$t(item.roleName)"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('可以查看表单的业务角色')" prop="viewBusRole">
            <!--            <el-select v-model="form.viewRole" multiple :placeholder="$t('请选择')" filterable clearable>-->
            <!--              <el-option-->
            <!--                v-for="item in roleOptions"-->
            <!--                :key="item.roleId"-->
            <!--                :label="$t(item.roleName)"-->
            <!--                :value="item.roleId"-->
            <!--              />-->
            <!--            </el-select>-->
            <dict-select v-model="form.viewBusRole" multiple :dictionary="busType === 'deal' ? 'deal_team_role' : 'fund_team_role'" :placeholder="$t('可以查看表单的业务角色')" clearable />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('可以编辑节点表单的角色')" prop="editSysRole">
            <el-select v-model="form.editSysRole" multiple :placeholder="$t('可以编辑节点表单的角色')" filterable clearable>
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="$t(item.roleName)"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('可以编辑节点表单的业务角色')" prop="editRole">
            <dictSelect
              v-model="form.editRole"
              :dictionary="busType === 'deal' ? 'deal_team_role' : 'fund_team_role'"
              :placeholder="$t('可以编辑节点表单的业务角色')"
              multiple
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('可以启动流程的角色')" prop="startRole">
            <el-select v-model="form.startRole" multiple :placeholder="$t('请选择')" filterable clearable>
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="$t(item.roleName)"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('可以启动流程的业务角色')" prop="startBusRole">
            <dictSelect
              v-model="form.startBusRole"
              :dictionary="busType === 'deal' ? 'deal_team_role' : 'fund_team_role'"
              :placeholder="$t('可以启动流程的业务角色')"
              clearable
              multiple
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('可以启动流程的部门')" prop="startDept">
            <!--            <treeselect v-model="form.startDept" value-consists-of="ALL" :options="deptOptions" :multiple="true" :normalizer="deptNormalizer" />-->
            <dept-select v-model="form.startDept" multiple clearable />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('可以豁免流程的角色')" prop="immunityRole">
            <el-select v-model="form.immunityRole" multiple :placeholder="$t('请选择')" filterable clearable>
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="$t(item.roleName)"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('什么状态下可以再次启动')" prop="restart">
            <el-select v-model="form.restart" multiple :placeholder="$t('请选择')" filterable clearable>
              <el-option
                v-for="dict in workFlowStatusOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('启动前校验的附件')" prop="checkFile">
            <treeselect v-model="form.checkFile" :options="defaultDir" :flat="true" :multiple="true" :default-expand-level="expansionLevel" :placeholder="$t('启动前校验的附件')" :normalizer="checkFileNormalizer" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item :label="$t('表单选填附件')" prop="optionalFile">
            <treeselect v-model="form.optionalFile" :options="defaultDir" :flat="true" :multiple="true" :default-expand-level="expansionLevel" :placeholder="$t('表单选填附件')" :normalizer="checkFileNormalizer" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item prop="after">
            <span slot="label">
              {{ $t('是否从文档库自动带出附件') }}
              <el-tooltip :content="$t('表单中需要上传的文件类型，如果文档库已经存在文件则自动带出')" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
            </span>
            <el-radio-group v-model="form.bringAccessories">
              <el-radio
                v-for="item in yesNoOptions"
                :key="item.dictValue"
                :label="$t(item.dictValue)"
              > {{ $t(item.dictLabel) }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId !== '0'" :span="12">
          <el-form-item prop="after">
            <span slot="label">
              {{ $t('审批完成后是否进入投后') }}
              <el-tooltip :content="$t('仅项目流程中可用')" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
            </span>
            <el-radio-group v-model="form.after">
              <el-radio
                v-for="item in yesNoOptions"
                :key="item.dictValue"
                :label="$t(item.dictValue)"
              > {{ $t(item.dictLabel) }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('审批完成后跳转阶段')" prop="jumpStage">
            <el-select v-model="form.jumpStage" :placeholder="$t('请选择')" filterable clearable>
              <el-option
                v-for="node in jumpNodeOptions"
                :key="node.id"
                :label="$t(node.nodeName)"
                :value="node.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('依赖节点')" prop="relyNode">
            <treeselect v-model="form.relyNode" :options="allNodeList" value-consists-of="LEAF_PRIORITY" :multiple="true" :placeholder="$t('依赖节点')" :normalizer="allNodeNormalizer" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId === '0'" :span="12">
          <el-form-item :label="$t('所属业务阶段')" prop="busStatus">
            <el-select v-model="form.busStatus" filterable :placeholder="$t('请选择')" clearable>
              <el-option
                v-for="dict in busStatusOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('显示排序')" prop="sort">
            <el-input-number v-model="form.sort" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="form.parentId === '0'" :span="12">
          <el-form-item :label="$t('提醒状态')" prop="status">
            <el-switch
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-text="$t('开启')"
              :inactive-text="$t('关闭')"
              :active-value="'Y'"
              :inactive-value="'N'"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId === '0' && form.status === 'Y'" :span="12">
          <el-form-item :label="$t('提醒方式')" prop="reminderMode">
            <el-checkbox-group v-model="form.reminderMode">
              <el-checkbox
                v-for="(dict, index) in reminderModeOptions"
                :key="index"
                :label="dict.dictValue"
                border
              >{{ $t(dict.dictLabel) }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId === '0' && form.status === 'Y'" :span="12">
          <el-form-item :label="$t('提醒标题')" prop="reminderTitle">
            <el-input v-model="form.reminderTitle" :placeholder="$t('提醒标题')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId === '0' && form.status === 'Y'" :span="12">
          <el-form-item :label="$t('是否提醒团队成员')" prop="isReminderTeamMembers">
            <el-radio-group v-model="form.isReminderTeamMembers">
              <el-radio
                v-for="item in yesNoOptions"
                :key="item.dictValue"
                :label="$t(item.dictValue)"
              > {{ $t(item.dictLabel) }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId === '0' && form.status === 'Y'" :span="12">
          <el-form-item :label="$t('其他提醒角色')" prop="otherReminderRoles">
            <el-select v-model="form.otherReminderRoles" :placeholder="$t('其他提醒角色')" filterable clearable>
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="$t(item.roleName)"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId === '0' && form.status === 'Y'" :span="12">
          <el-form-item :label="$t('其他提醒用户')" prop="otherReminderUser">
            <user-select v-model="form.otherReminderUser" :placeholder="$t('其他提醒用户')" multiple />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId === '0' && form.status === 'Y'" :span="12">
          <el-form-item :label="$t('提醒频率')" prop="reminderFrequency">
            <el-row>
              <el-col :span="7">
                <el-button type="primary" style="width: 100%;top: 0;border: 1px;border-radius: 0;background-color:#f6f7fb ;color:#9e9898 ">{{ $t('进入该阶段后的第') }}</el-button>
              </el-col>
              <el-col :span="14">
                <el-select v-model="form.reminderFrequency" multiple :placeholder="$t('提醒频率')" filterable clearable>
                  <el-option
                    v-for="item in reminderFrequencyOptions"
                    :key="item.dictValue"
                    :label="$t(item.dictLabel)"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" style="width: 100%;border: none;border-radius: 0;background-color:#f6f7fb ;color:#9e9898 ">{{ $t('天') }}</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <!--        <el-col v-if="form.parentId === '0'" :span="12">-->
        <!--          <el-form-item :label="$t('提醒频率')" prop="reminderFrequency">-->
        <!--            <div class="reminderFront" style="top: 0;">-->
        <!--              <span class="reminderBack">{{ $t('进入该阶段后的第') }}</span>-->
        <!--            </div>-->
        <!--            <el-select v-model="form.reminderFrequency" multiple :placeholder="$t('提醒频率')" filterable clearable>-->
        <!--              <el-option-->
        <!--                v-for="item in reminderFrequencyOptions"-->
        <!--                :key="item.dictValue"-->
        <!--                :label="$t(item.dictLabel)"-->
        <!--                :value="item.dictValue"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--            <div class="addGLR" style="top: 0;">-->
        <!--              <span class="addGLRText">{{ $t('天') }}</span>-->
        <!--            </div>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col v-if="form.parentId === '0' && form.status === 'Y'" :span="24">
          <el-form-item :label="$t('提醒内容')" prop="reminderContent">
            <EditorTxt v-model="form.reminderContent" :placeholder="$t('提醒内容')" />
          </el-form-item>
        </el-col>
        <el-col v-if="form.parentId === '0'" :span="12">
          <el-form-item :label="$t('阶段完成后是否需要执行脚本')" prop="sqlStatus">
            <dict-select v-model="form.sqlStatus" :placeholder="$t('阶段完成后是否需要执行脚本')" dictionary="sys_yes_no" @change="dictChange" />
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <div v-if="form.parentId === '0' && form.status === 'Y'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('关键字列表') }}</span>
        </div>
        <el-table class="nowrapTable formTable" :data="form.configNodeKeywordList" border>
          <el-table-column :label="$t('字段名称')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('字段名称') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'configNodeKeywordList.' + scope.$index + '.fieldName'" :rules="configNodeKeywordRules.fieldName">
                <el-input v-model="scope.row.fieldName" :placeholder="$t('字段名称')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" align="center">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.remark" :placeholder="$t('备注')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center" width="80">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" @click="delTemplate(scope.$index, scope.row)">{{ $t('删除') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addTemplate">{{ $t("添加") }}</el-button>
        </div>
      </div>
      <el-row>
        <el-col v-if="form.parentId === '0' && form.sqlStatus === 'Y'" :span="24">
          <el-form-item :label="$t('当前阶段完成后需要执行的脚本')" prop="processRequirement">
            <textarea ref="executeSql" v-model="form.executeSql" class="codesql" style="height:200px;width:600px;" />
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col v-if="form.parentId === '0'" :span="24">
          <el-form-item :label="$t('流程要求')" prop="processRequirement">
            <el-input v-model="form.processRequirement" type="textarea" :placeholder="$t('流程要求')" show-word-limit maxlength="2000" />
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <div v-if="form.parentId === '0'">
        <div class="area-header">
          <span class="area-header-title">{{ $t('确认事项列表') }}</span>
        </div>
        <el-table class="nowrapTable formTable" :data="form.wfConfigConfirmedList" border>
          <el-table-column :label="$t('序号')" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('确认事项')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('确认事项') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'wfConfigConfirmedList.' + scope.$index + '.confirmedItem'" :rules="wfConfigConfirmedRules.confirmedItem">
                <el-input v-model="scope.row.confirmedItem" :placeholder="$t('确认事项')" show-word-limit maxlength="2000" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'wfConfigConfirmedList.' + scope.$index + '.remark'">
                <el-input v-model="scope.row.remark" :placeholder="$t('备注')" show-word-limit maxlength="2000" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center" width="80">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" @click="delConfirmed(scope.$index, scope.row)">{{ $t('删除') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addConfirmed">{{ $t("添加") }}</el-button>
        </div>
      </div>
      <br>

    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <SaveBtn has-permi="act:busflow" />
    </div>
  </div>
</template>

<script>
    import { saveWfConfigNode, getWfConfigNode, parentNode, listWfConfigNode, delKeyword, delConfirmend } from '@/api/act/busFlow/wfConfigNode'
    import { allRole } from '@/api/system/role'
    import { treeselect } from '@/api/system/dept'
    import { getFormList, getMeetingForm } from '@/api/act/config/wfApplyForm'
    import { listDataProcess } from '@/api/act/process/actProcess'
    import { getWfConfigFlow } from '@/api/act/busFlow/wfConfigFlow'
    import { getDirByBelong } from '@/api/file/filefolder/folder.js'
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import EditorTxt from '@/components/Editor'
    import 'codemirror/theme/ambiance.css'
    import 'codemirror/lib/codemirror.css'
    import 'codemirror/addon/hint/show-hint.css'

    const CodeMirror = require('codemirror/lib/codemirror')
    require('codemirror/addon/edit/matchbrackets')
    require('codemirror/addon/selection/active-line')
    require('codemirror/mode/sql/sql')
    require('codemirror/addon/hint/show-hint')
    require('codemirror/addon/hint/sql-hint')

    export default {
        components: { Treeselect, EditorTxt },
        data() {
            return {
                // 表单参数
                form: {
                  configNodeKeywordList: [],
                  wfConfigConfirmedList: []
                },
              editor: null,
              busType: undefined,
                // 遮罩层
                loading: false,
                // 该业务的默认附件类型
                defaultDir: [],
                // 所有节点-流程依赖节点选择使用
                allNodeList: [],
                // 会议类型
                mtTypeOptions: [],
                // 是否字典
                yesNoOptions: [],
                // 角色选项
                roleOptions: [],
                // 归属业务状态字典
                busStatusOptions: [],
                // 流程审批状态
                workFlowStatusOptions: [],
                // 部门树选项
                deptOptions: undefined,
                // 表单类型字典
                formTypeOptions: [],
                // 绑定表单集合
                formList: [],
                // 流程下拉框
                procDefKeyOptions: [],
                // 父节点下拉框
                parentNodeOptions: [],
                // 流程审批通过调整阶段下拉框
                jumpNodeOptions: [],
                // 提醒方式字典
                reminderModeOptions: [],
                // 提醒频率字典
                reminderFrequencyOptions: [],
                // 文件选择下拉默认展开多少层
                expansionLevel: 0,
                // 表单校验
                rules: {
                  nodeName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  formType: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  formId: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  status: [
                    { required: true, message: this.$t('必填信息'), trigger: ['change', 'blur'] }
                  ],
                  reminderTitle: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  reminderMode: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  isReminderTeamMembers: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  reminderFrequency: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  reminderContent: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ]
                },
              configNodeKeywordRules: {
                fieldName: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
              },
              wfConfigConfirmedRules: {
                confirmedItem: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
              }

            }
        },
        created() {
          this.busType = localStorage.getItem('wfConfigFlowBusType')
          // 提醒方式字典
          this.getDicts('reminder_mode').then(response => {
            this.reminderModeOptions = response.data
          })
          // 是否字典
          this.getDicts('sys_yes_no').then(response => {
            this.yesNoOptions = response.data
          })
          // 是否字典
          this.getDicts('work_flow_status').then(response => {
            this.workFlowStatusOptions = response.data
          })
          // 角色
          allRole().then(response => {
            this.roleOptions = response.data
          })
          // 部门树
          treeselect().then(response => {
            this.deptOptions = response.data
          })
          // 表单类型
          this.getDicts('form_type').then(response => {
            this.formTypeOptions = response.data
          })
          // 查询流程下拉框
          listDataProcess().then(response => {
            this.procDefKeyOptions = response.data
          })
          // 会议类型
          this.getDicts('mt_type').then(response => {
            this.mtTypeOptions = response.data
          })
          // 提醒频率
          this.getDicts('wfConfig_reminderFrequency').then(response => {
            this.reminderFrequencyOptions = response.data
          })
        },
      methods: {
          // 初始化数据
          init(id, flowId, nodeType) {
            this.loading = true
            if (id != null && id !== '') {
              getWfConfigNode(id).then(response => {
                this.form = response.data
                if (!this.form.reminderMode) {
                  this.form.reminderMode = []
                }
                if (this.form.parentId === '0' && this.form.configNodeKeywordList.length === 0) {
                  // 生成默认关键字
                  this.addKeyWord()
                }
                // 如果表单类型选择了值，则初始化表单下拉框
                if (this.form.formType !== undefined) {
                  this.getFormList(this.form)
                }
                this.dictChange()
                this.loading = false
              })
            } else {
              this.reset()
              // 生成默认关键字
              this.addKeyWord()
              this.form.flowId = flowId
              this.form.nodeType = nodeType
              this.dictChange()
              this.loading = false
            }
            // 查询父节点信息
            this.getParentNode(flowId, nodeType)
            // 查询默认的文件夹
            this.getDefaultDir(flowId)
            // 查询所有节点-流程依赖节点选择使用
            this.getAllNode(flowId, nodeType)
            // 归属业务状态字典
            this.getBusStatusOptions(flowId)
          },
        changeMeeting() {
          if (this.form.meeting === 'Y') {
            this.form.formType = 'dev'
            getMeetingForm().then(res => {
              this.form.formId = res.msg
            })
          }
        },
        initSqlEditor() {
            this.editor = null
          const mime = 'text/x-mariadb'
          // let theme = 'ambiance'//设置主题，不设置的会使用默认主题
          this.editor = CodeMirror.fromTextArea(this.$refs.executeSql, {
            mode: mime, // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
            indentWithTabs: true,
            smartIndent: true,
            lineNumbers: true,
            matchBrackets: true,
            // theme: theme,
            // autofocus: true,
            extraKeys: { 'Ctrl': 'autocomplete' }, // 自定义快捷键
            hintOptions: { // 自定义提示选项
              tables: {
                users: ['name', 'score', 'birthDate'],
                countries: ['name', 'population', 'size']
              }
            }
          })

          this.editor.on('cursorActivity', function() {
            if (this !== null) {
              this.editor.showHint()
            }
          })
        },
        dictChange() {
          if (this.form.sqlStatus === 'Y') {
            this.$nextTick(() => {
              this.initSqlEditor()
            })
          }
        },
            // 表单重置
            reset() {
                this.form = {
                id: undefined,
                flowId: undefined,
                parentId: '0',
                nodeName: undefined,
                formType: undefined,
                formId: undefined,
                operation: 'Y',
                processKey: undefined,
                meeting: undefined,
                meetingType: undefined,
                viewRole: undefined,
                viewBusRole: undefined,
                editRole: undefined,
                editSysRole: undefined,
                startRole: undefined,
                startBusRole: undefined,
                startDept: undefined,
                immunityRole: undefined,
                restart: undefined,
                checkFile: undefined,
                optionalFile: undefined,
                bringAccessories: 'Y',
                after: undefined,
                busStage: undefined,
                jumpStage: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                  executeSql: undefined,
                delFlag: undefined,
                  sqlStatus: 'N',
                  sqlBase: undefined,
                  reminderMode: [],
                  isReminderTeamMembers: 'Y',
                  status: 'N',
                  reminderTitle: undefined,
                  otherReminderRoles: undefined,
                  otherReminderUser: [],
                  reminderFrequency: [],
                  reminderContent: undefined,
                  isConfirmedItem: 'N',
                  processRequirement: undefined,
                  wfConfigConfirmedList: []
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                      this.loading = true
                      if (this.editor) {
                        this.form.executeSql = this.editor.getValue()
                      }
                        saveWfConfigNode(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.$parent.$parent.formOpen = false
                                this.$parent.$parent.getList(this.form.flowId)
                                this.loading = false
                            } else {
                                this.msgError(response.msg)
                                this.loading = false
                            }
                        }).catch(() => {
                          this.loading = false
                        })
                    } else {
                      this.locationError(document)
                    }
                })
           },
          // 获取业务阶段
          getBusStatusOptions: function(flowId) {
            getWfConfigFlow(flowId).then(response => {
              if (response.data.busType === 'fund') {
                this.getDicts('fund_status').then(response => {
                  this.busStatusOptions = response.data
                })
              } else {
                this.getDicts('deal_status').then(response => {
                  this.busStatusOptions = response.data
                })
              }
            })
          },
          // 根据表单类型获取表单
          getFormList: function(form, cleanFormId) {
            if (form.formType) {
              getFormList(form.formType).then(response => {
              if (response.code === 200) {
                this.formList = response.data
                if (cleanFormId) {
                  form.formId = null
                }
              } else {
                this.msgError(response.msg)
              }
            })
            }
          },
          // 查询父节点信息
          getParentNode(flowId, nodeType) {
            // 查询父节点
            parentNode(flowId, nodeType).then(response => {
              this.parentNodeOptions = response.data
              this.jumpNodeOptions = JSON.parse(JSON.stringify(response.data))
              const node = {
                id: '0',
                nodeName: this.$t('无')
              }
              this.parentNodeOptions.push(node)
            })
          },
          // 查询该类型的默认文件夹
          getDefaultDir(flowId) {
            getWfConfigFlow(flowId).then(response => {
              if (response.code === 200) {
                getDirByBelong(this.isEmpty(response.data.busDataType) ? response.data.busType : response.data.busDataType).then(res => {
                  this.defaultDir = res.data
                  this.checkIfItIsOptionalMain(this.defaultDir)
                })
              } else {
                this.msgError(response.msg)
              }
            })
          },
          // 检查是否可选
          checkIfItIsOptionalMain(data) {
            console.log('检查是否可选')
            if (!this.isEmpty(data) && data[0].parentId === '0') {
              var temp = []
              data.forEach(item => {
                temp.push(item.id)
              })
              this.$set(this, 'expansionLevel', temp.length > 1 ? 0 : 1)
            }
            data.forEach(item => {
              item.isDisabled = (item.parentId === '0')
              this.checkIfItIsOptionalSub(item)
            })
          },
          checkIfItIsOptionalSub(data) {
            if (data !== null && data.children !== null) {
              data.children.forEach(item => {
                item.isDisabled = item.parentId === '0'
                this.checkIfItIsOptionalSub(item)
              })
            }
          },
          // 启动流程校验附件的格式化方法
          checkFileNormalizer(node) {
            if (node.children && node.children.length === 0) {
              delete node.children
            }
            return {
              id: node.id,
              label: node.name,
              children: node.children
            }
          },
          deptNormalizer(node) {
            if (node.children && node.children.length === 0) {
              delete node.children
            }
          },
          allNodeNormalizer(node) {
            if (node.children && node.children.length === 0) {
              delete node.children
            }
            return {
              id: node.id,
              label: node.nodeName,
              children: node.children
            }
          },
          // 查询所有节点-流程依赖节点选择使用
          getAllNode(flowId, nodeType) {
            var allNodeQuery = {}
            allNodeQuery.flowId = flowId
            allNodeQuery.nodeType = nodeType
            listWfConfigNode(allNodeQuery).then(response => {
              this.allNodeList = response.rows
            })
          },
          // 删除关键字列表
          delTemplate(index, row) {
            const id = row.id
            if (id !== undefined && id !== '' && id != null) {
              this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              })
                .then(function() {
                  return delKeyword(id)
                }).then(() => {
                this.form.configNodeKeywordList.splice(index, 1)
                return this.msgSuccess(this.$t('删除成功'))
              })
                .catch(function() {})
            } else {
              this.form.configNodeKeywordList.splice(index, 1)
            }
          },
          addTemplate() {
            const row = {
              id: undefined,
              fieldName: undefined,
              remark: undefined
            }
            if (!(this.form.configNodeKeywordList instanceof Array)) {
              this.$set(this.form, 'configNodeKeywordList', [])
            }
            this.$nextTick(() => {
              this.form.configNodeKeywordList.push(row)
            })
          },
          addKeyWord() {
            var busType = localStorage.getItem('wfConfigFlowBusType')
            if (busType) {
              var row = []
              if (busType === 'deal') {
                row = {
                  id: undefined,
                  fieldName: 'dealName',
                  remark: '项目名称'
                }
              } else if (busType === 'fund') {
                row = {
                  id: undefined,
                  fieldName: 'fundName',
                  remark: '基金名称'
                }
              } else {
                row = {
                  id: undefined,
                  fieldName: 'fundName',
                  remark: '公司名称'
                }
              }
              if (!(this.form.configNodeKeywordList instanceof Array)) {
                this.$set(this.form, 'configNodeKeywordList', [])
              }
              this.$nextTick(() => {
                this.form.configNodeKeywordList.push(row)

                this.form.configNodeKeywordList.push({
                  id: undefined,
                  fieldName: 'residenceTime',
                  remark: '停留天数'
                })
              })
            }
          },
          // 删除确认事项
          delConfirmed(index, row) {
            const id = row.id
            if (id !== undefined && id !== '' && id != null) {
              this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              })
                .then(function() {
                  return delConfirmend(id)
                }).then(() => {
                this.form.wfConfigConfirmedList.splice(index, 1)
                return this.msgSuccess(this.$t('删除成功'))
              })
                .catch(function() {})
            } else {
              this.form.wfConfigConfirmedList.splice(index, 1)
            }
          },
          // 新增确认事项
          addConfirmed() {
            const row = {
              id: undefined,
              configNodeId: undefined,
              confirmedItem: undefined
            }
            if (!(this.form.wfConfigConfirmedList instanceof Array)) {
              this.$set(this.form, 'wfConfigConfirmedList', [])
            }
            this.$nextTick(() => {
              this.form.wfConfigConfirmedList.push(row)
            })
          }
        }

    }
</script>
<!--<style type="text/scss" lang="scss">-->
<!--  .addGLR {-->
<!--    height: 36px;-->
<!--    position: absolute;-->
<!--    right: 30px;-->
<!--    z-index: 1001 !important;-->
<!--    border: 1px solid #dcdfe6;-->
<!--    border-top-right-radius: 3px;-->
<!--    border-bottom-right-radius: 3px;-->
<!--    background-color: #f5f7fa;-->
<!--    color: #9e9898;-->
<!--  }-->
<!--  .addGLRText {-->
<!--    padding: 0 10px;-->
<!--    cursor: pointer;-->
<!--    color: inherit;-->
<!--    text-decoration: none;-->
<!--    font-size: 14px;-->
<!--    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;-->
<!--  }-->
<!--  .reminderFront {-->
<!--    height: 36px;-->
<!--    position: absolute;-->
<!--    z-index: 1001 !important;-->
<!--    border: 1px solid #dcdfe6;-->
<!--    border-top-right-radius: 3px;-->
<!--    border-bottom-right-radius: 3px;-->
<!--    background-color: #f5f7fa;-->
<!--    color: #9e9898;-->
<!--  }-->
<!--  .reminderBack {-->
<!--    padding: 0 10px;-->
<!--    cursor: pointer;-->
<!--    color: inherit;-->
<!--    text-decoration: none;-->
<!--    font-size: 14px;-->
<!--    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;-->
<!--  }-->
<!--</style>-->
